import React from 'react';
import { connect } from 'dva';
import { TabBar, Icon, ActivityIndicator } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import defaultImage from '../../../../assets/avatar.jpg';
import content from '../../common/contentCss/content.css';
import Screen from '../../../../common/plugin/screen/screen';
import styles from './common.css';
import SearchView from './pages/title/title';

import token from '../../../../framework/utils/token';
import CustList from '../../../../common/lists/CustomList';


function Search({ dispatch, loading, search, relations }) {

  const { typeArr, areasArr} = relations;

  const {pageNum,pages,pageSize,isShow,ordey,hiddenArr,
    ordeyIndex,areaIndex,typeNameIndex,selectIndex, jobList } = search;

  // console.log('isShowisShow',isShow);
  const partTimeListProps = {
    loading,
    list: jobList,
    pageSize,
    onViewMember(id){
      dispatch(routerRedux.push({
        pathname: '/part-time-detail',
        query: {
          id,
        }
      }));
    },
    onPagination() {
      // if (loading || JSON.stringify(list) == "[]") {
      //   return;
      // }
      // console.log('pageSizepageSizepageSize');
      // console.log(pageNum);
      // console.log(pageSize);
      // console.log(search.jobList.pages);
      if (pageNum*10 >= search.jobList.total) {
        dispatch({
          type: 'search/onSearch',
          payload: {
            pageNum: pageNum,
            pageSize: pageSize
          }
        })
      } else {
        dispatch({
          type: 'search/onSearch',
          payload: {
            pageNum: pageNum + 1,
            pageSize: pageSize + 10
          }
        })
      }
    },
    showLimit(id){
      onViewMember(id);
    }
  }

  //搜索栏
  const SearchProps = {
    goBack(){
      history.go(-1);
      dispatch({
        type: 'search/querySuccess',
        payload: {
          isShow: -1
        }
      })
    },
    onSearch(searchValue,searchKey){

      dispatch({
        type: 'search/querySuccess',
        payload: {
          searchValue
        }
      })
      dispatch({
        type: 'search/onSearch',
        payload:{
        }
      })
    }
  }

  //排序栏
  const showScreen = () => {

    let showScreenStyles = [`${styles.screen}`];
    if(isShow != -1){
      showScreenStyles.push(`${styles.showScreenList}`)
    }

    const screenProps = {
      isShow,
      ordeyIndex,
      areaIndex,
      typeNameIndex,
      hiddenArr,
      selectIndex,
      list:[],
      ordey,
      areasArr,
      typeArr,
      onClickF(id){
        let number=-1
        if ( id==isShow ) {
          number=-1
        } else if (id==1) {
          number = 1
        } else if (id==2) {
          number = 2
        } else {
          number = 3
        }
        dispatch({
          type: 'search/querySuccess',
          payload: {
            isShow: number,
            screenTabIndex:id
          }
        })
      },
      onSelect(id, index, itemData){
        if (id==1) {
          // console.log('综合', JSON.stringify(itemData));
          dispatch({
            type: 'search/querySuccess',
            payload: {
              isShow: -1,
              selectIndex:1,
              ordeyIndex: index,
              key:itemData.value,
            }
          });
          dispatch({
            type: 'search/onSearch',
            payload: {
            }
          })

        } else if (id==2) {
          // console.log('区域', JSON.stringify(itemData));
            dispatch({
              type: 'search/querySuccess',
              payload: {
                isShow: -1,
                selectIndex:2,
                areaIndex:index,
                district:itemData.name
              }
            })
            dispatch({
              type: 'search/onSearch',
              payload: {
              }
            })
        } else if (id==3) {
          // console.log('类型', JSON.stringify(itemData));
            dispatch({
              type: 'search/querySuccess',
              payload: {
                isShow: -1,
                selectIndex:3,
                typeNameIndex: index,
                typeId:itemData.id
              }
            })
            dispatch({
              type: 'search/onSearch',
              payload: {
              }
            })
        }
      },

      onSelectClose(){
        dispatch({
          type: 'search/querySuccess',
          payload: {
            isShow: -1,
          }
        })
      }

    }

    return (
      <div className={showScreenStyles.join(' ')}>
        <Screen {...screenProps} />
      </div>
    )
  }


  const MarginHeight = () => <div style={{height: '0.6em', backgroundColor:'#F2F2F2'}}></div>;
  const CutLine = () => <div style={{width: '100%', height:'1px', backgroundColor:'#E4E4E4'}}></div>;

  return (

    <div className={content.content} >

        <SearchView {...SearchProps} />
        {showScreen()}
        {/* {jobList.length > 0 ?
          (
            showScreen()
          ):''
        } */}
        {/* <div style={jobList.length > 0 ? {marginTop:'5.8125em'} : {marginTop:'2.8125em'}}> */}
        <div style={{marginTop:'5.8125em'}}>
          <div className={styles.jobList}>
           <CustList {...partTimeListProps} />
          </div>
        </div>
        <ActivityIndicator
          toast
          text=""
          animating={loading}
        />

    </div>
  )
}

Search.propTypes = {
};

function mapStateToProps(state, ownProps) {
  return {
    loading: state.loading.global,
    search: state.search,
    relations: state.relations
  }
}
export default connect(mapStateToProps)(Search);
